<template>
  <div>
    <MomentCommentBox
      :commentInfo="commentInfo"
      @submit-box="submitBox"
    ></MomentCommentBox>
    <div class="message_infos">
      <MomentCommentList :tableName="tableName" :comments="comments" :authorUid="authorUid" :marginLeft="marginLeft" :commentInfo="commentInfo" :maxReplyLevel="maxReplyLevel"></MomentCommentList>
      <div class="noComment" v-if="comments.length === 0">还没有评论，快来抢沙发吧！</div>
    </div>
  </div>
</template>

<script>
  import MomentCommentList from "@/components/MomentComment/MomentCommentList";
  import MomentCommentBox from "@/components/MomentComment/MomentCommentBox"
  import {addMomentComment, getMomentCommentList} from "../../api/comment";
  import {mapMutations} from "vuex";
  export default {
    name: 'MomentComment',
    props: {
      targetId: [Number, String],
      tableName: {
        type: String,
        default: '',
      },
      // 控制最大评论层级
      maxReplyLevel: {
        type: Number,
        default: 5,
      },
      // 左边偏移量
      marginLeft: {
        type: Number,
        default: -3,
      },
      // 作者UID
      authorUid: {
        type: String,
        default: '',
      },
    },
    components: {
      //注册组件
      MomentCommentList,
      MomentCommentBox
    },
    data() {
      return {
        comments: [],
        currentPage: 1,
        pageSize: 10,
        commentInfo: {
          memberUid: this.targetId,
          source: this.tableName
        }
      }
    },
    computed: {

    },
    watch: {
      targetId:{
        //深度监听，可监听到对象、数组的变化
        handler(newValue, oldVal){
          console.log("targetId", newValue)
          this.commentInfo.memberUid = newValue;
          this.getCommentDataList();
        }
      },
    },
    mounted () {
      let that = this;
      if (this.targetId) {
        this.commentInfo.memberUid = this.targetId;
      }
      this.getCommentDataList();
      let after = 0;
      let offset = 200
      $(window).scroll(function () {
        let docHeight = $(document).height(); // 获取整个页面的高度(不只是窗口,还包括为显示的页面)
        let winHeight = $(window).height(); // 获取当前窗体的高度(显示的高度)
        let winScrollHeight = $(window).scrollTop(); // 获取滚动条滚动的距离(移动距离)

        if (winScrollHeight < offset) {
          that.showStickyTop = false
        } else {
          that.showStickyTop = true
        }
        after = winScrollHeight;
        //还有30像素的时候,就查询
        if(docHeight == winHeight + winScrollHeight){
          if(that.comments.length >= that.total) {
            return;
          }
          let params = {};
          params.source = that.commentInfo.source;
          params.memberUid = that.commentInfo.memberUid;
          params.currentPage = that.currentPage + 1
          params.pageSize = that.pageSize;
          params.openSecondLevel = true;
          getMomentCommentList(params).then(response => {
            if (response.code == that.$ECode.SUCCESS) {
              that.comments = that.comments.concat(response.data.records);
              that.setCommentList(that.comments);
              that.currentPage = response.data.current;
              that.pageSize = response.data.size;
              that.total = response.data.total;
            }
          });
        }
      })
    },

    methods: {
      ...mapMutations(["setCommentList", 'setDomainEventMessage']),
      // 发表评论
      submitBox(e) {
        let params = {};
        params.source = e.source;
        params.createUserUid = e.userUid;
        params.content = e.content;
        params.memberUid = e.memberUid;
        addMomentComment(params).then(response => {
          if (response.code === this.$ECode.SUCCESS){
            if(response.data.auditStatus === "2") {
              this.$message.success("评论成功！");
            } else {
              this.$message.warning("提交成功，请耐心等待审核~");
            }
            this.getCommentDataList();

            // 发送点赞的领域事件
            let event = {
              "type": "action",
              "action": this.$EAction.Comment,
              "resourceUid": e.memberUid,
              "resourceType": "BLOG",
              "time": new Date(),
            }
            this.setDomainEventMessage(event)
          }else{
            this.$message.error(response.message)
          }
        });
      },
      getCommentDataList: function() {
        let source = this.commentInfo.source
        let memberUid = this.commentInfo.memberUid
        if(source == "RANK_MEMBER_INFO" && !memberUid) {
          return
        }
        if(source == "PROBLEM_INFO" && !memberUid) {
          return
        }
        let params = {};
        params.source = this.commentInfo.source;
        params.memberUid = this.commentInfo.memberUid;
        params.currentPage = this.currentPage;
        params.pageSize = this.pageSize;
        params.openSecondLevel = true;
        getMomentCommentList(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.comments = response.data.records;
            this.setCommentList(this.comments);
            this.currentPage = response.data.current;
            this.pageSize = response.data.size;
            this.total = response.data.total
          }
        });
      },
    }
  };
</script>


<style scoped>
  .noComment {
    width: 100%;
    text-align: center;
  }
</style>
